<template>
  <!-- 修改头像模块 -->
  <div class="loginuser">
    <el-button @click="drawer = true" type="primary">
      <img :src="baseURL + userInfo.photo" alt="" class="logimg" />
    </el-button>
  </div>
  <el-drawer title="我是标题" v-model="drawer" :with-header="false">
    <div class="login-information">
      <article class="information-01 clearfix">
        <h2 class="title02">
          <svg
            t="1630925950687"
            class="icon hot"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2829"
            width="200"
            height="200"
          >
            <path
              d="M678.4 713.6c75.5-86.1 183.7-243.4 183.7-338.4 0-175.5-142.3-317.7-317.7-317.7-175.5 0-317.7 142.3-317.7 317.7 0 95 107.2 252.3 182.3 338.4h269.4z"
              fill="#186FED"
              p-id="2830"
            ></path>
            <path
              d="M687.5 733.6H399.8l-6-6.9c-44-50.4-88.3-112-121.5-168.9-43.6-74.7-65.7-136.1-65.7-182.6 0-45.6 8.9-89.8 26.5-131.5 17-40.2 41.4-76.3 72.4-107.3S372.7 81 412.9 64c41.6-17.6 85.9-26.5 131.5-26.5s89.8 8.9 131.5 26.5c40.2 17 76.3 41.4 107.3 72.4 31 31 55.4 67.1 72.4 107.3 17.6 41.6 26.5 85.9 26.5 131.5 0 46.5-22.3 108-66.3 182.7-33.4 56.8-78 118.3-122.3 168.9l-6 6.8z m-269.4-40h251.2c40.3-46.9 81.8-104.6 112-156 39.8-67.5 60.8-123.7 60.8-162.4 0-79.5-31-154.3-87.2-210.5-56.2-56.2-131-87.2-210.5-87.2s-154.3 31-210.5 87.2-87.2 131-87.2 210.5c0 38.8 20.8 95 60.3 162.4 30 51.5 71.1 109.2 111.1 156z"
              fill="#444D68"
              p-id="2831"
            ></path>
            <path
              d="M544.4 892.5c-5.5 0-10-4.5-10-10V709.7c0-5.5 4.5-10 10-10s10 4.5 10 10v172.9c0 5.5-4.5 9.9-10 9.9zM477.1 892.5c-4 0-7.8-2.4-9.3-6.3l-59.3-150.6c-2-5.1 0.5-10.9 5.6-13 5.1-2 10.9 0.5 13 5.6l59.3 150.6c2 5.1-0.5 10.9-5.6 13-1.2 0.5-2.4 0.7-3.7 0.7zM611.6 892.5c-1.2 0-2.5-0.2-3.7-0.7-5.1-2-7.7-7.8-5.6-13l59.3-150.6c2-5.1 7.8-7.7 13-5.6 5.1 2 7.7 7.8 5.6 13l-59.3 150.6c-1.5 3.9-5.3 6.3-9.3 6.3z"
              fill="#444D68"
              p-id="2832"
            ></path>
            <path
              d="M610.7 966.5H478c-5.3 0-9.7-4.3-9.7-9.7l-38.6-120.2c0-5.3 4.3-9.7 9.7-9.7h210c5.3 0 9.7 4.3 9.7 9.7l-38.6 120.2c-0.1 5.4-4.5 9.7-9.8 9.7z"
              fill="#F9CC12"
              p-id="2833"
            ></path>
            <path
              d="M610.7 976.5H478c-10.2 0-18.6-7.8-19.6-17.8l-38.7-120.5v-1.6c0-10.8 8.8-19.7 19.7-19.7h210c10.8 0 19.7 8.8 19.7 19.7v1.6l-0.5 1.5-38.2 119c-1.1 10-9.5 17.8-19.7 17.8z m-132.3-20h132v-1.2l0.5-1.5L648.4 837h-208l38 118.3v1.2z"
              fill="#444D68"
              p-id="2834"
            ></path>
            <path
              d="M438.4 391.6c0 128.3 41 243.4 105.9 322 65-78.6 105.9-193.7 105.9-322s-41-243.4-105.9-322c-64.9 78.6-105.9 193.8-105.9 322z"
              fill="#F9CC12"
              p-id="2835"
            ></path>
            <path
              d="M544.4 745L529 726.3c-34.5-41.8-61.7-91.8-80.9-148.7-19.7-58.5-29.7-121.1-29.7-186s10-127.5 29.7-186c19.1-56.9 46.3-106.9 80.9-148.7l15.4-18.6 15.4 18.6c34.5 41.8 61.7 91.8 80.9 148.7 19.7 58.5 29.7 121.1 29.7 186s-10 127.5-29.7 186c-19.1 56.9-46.3 106.9-80.9 148.7L544.4 745z m0-642.5c-54.9 76.6-85.9 180.4-85.9 289.2s31.1 212.6 85.9 289.2c54.9-76.6 85.9-180.4 85.9-289.2S599.2 179 544.4 102.5z"
              fill="#444D68"
              p-id="2836"
            ></path>
          </svg>
          <span style="color:green">头像上传</span>
        </h2>
        <div class="information-img-radius">
          <img :src="baseURL + userInfo.photo" alt="" />
        </div>
        <el-upload
          class="avatar-uploader"
          :action="baseURL + '/personal/photo'"
          :show-file-list="false"
          :with-credentials="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
        <!-- 缩略图 -->
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </article>


      <article class="information-01 clearfix">
        <h2 class="title02">
          <svg
            t="1630925950687"
            class="icon hot"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2829"
            width="200"
            height="200"
          >
            <path
              d="M678.4 713.6c75.5-86.1 183.7-243.4 183.7-338.4 0-175.5-142.3-317.7-317.7-317.7-175.5 0-317.7 142.3-317.7 317.7 0 95 107.2 252.3 182.3 338.4h269.4z"
              fill="#186FED"
              p-id="2830"
            ></path>
            <path
              d="M687.5 733.6H399.8l-6-6.9c-44-50.4-88.3-112-121.5-168.9-43.6-74.7-65.7-136.1-65.7-182.6 0-45.6 8.9-89.8 26.5-131.5 17-40.2 41.4-76.3 72.4-107.3S372.7 81 412.9 64c41.6-17.6 85.9-26.5 131.5-26.5s89.8 8.9 131.5 26.5c40.2 17 76.3 41.4 107.3 72.4 31 31 55.4 67.1 72.4 107.3 17.6 41.6 26.5 85.9 26.5 131.5 0 46.5-22.3 108-66.3 182.7-33.4 56.8-78 118.3-122.3 168.9l-6 6.8z m-269.4-40h251.2c40.3-46.9 81.8-104.6 112-156 39.8-67.5 60.8-123.7 60.8-162.4 0-79.5-31-154.3-87.2-210.5-56.2-56.2-131-87.2-210.5-87.2s-154.3 31-210.5 87.2-87.2 131-87.2 210.5c0 38.8 20.8 95 60.3 162.4 30 51.5 71.1 109.2 111.1 156z"
              fill="#444D68"
              p-id="2831"
            ></path>
            <path
              d="M544.4 892.5c-5.5 0-10-4.5-10-10V709.7c0-5.5 4.5-10 10-10s10 4.5 10 10v172.9c0 5.5-4.5 9.9-10 9.9zM477.1 892.5c-4 0-7.8-2.4-9.3-6.3l-59.3-150.6c-2-5.1 0.5-10.9 5.6-13 5.1-2 10.9 0.5 13 5.6l59.3 150.6c2 5.1-0.5 10.9-5.6 13-1.2 0.5-2.4 0.7-3.7 0.7zM611.6 892.5c-1.2 0-2.5-0.2-3.7-0.7-5.1-2-7.7-7.8-5.6-13l59.3-150.6c2-5.1 7.8-7.7 13-5.6 5.1 2 7.7 7.8 5.6 13l-59.3 150.6c-1.5 3.9-5.3 6.3-9.3 6.3z"
              fill="#444D68"
              p-id="2832"
            ></path>
            <path
              d="M610.7 966.5H478c-5.3 0-9.7-4.3-9.7-9.7l-38.6-120.2c0-5.3 4.3-9.7 9.7-9.7h210c5.3 0 9.7 4.3 9.7 9.7l-38.6 120.2c-0.1 5.4-4.5 9.7-9.8 9.7z"
              fill="#F9CC12"
              p-id="2833"
            ></path>
            <path
              d="M610.7 976.5H478c-10.2 0-18.6-7.8-19.6-17.8l-38.7-120.5v-1.6c0-10.8 8.8-19.7 19.7-19.7h210c10.8 0 19.7 8.8 19.7 19.7v1.6l-0.5 1.5-38.2 119c-1.1 10-9.5 17.8-19.7 17.8z m-132.3-20h132v-1.2l0.5-1.5L648.4 837h-208l38 118.3v1.2z"
              fill="#444D68"
              p-id="2834"
            ></path>
            <path
              d="M438.4 391.6c0 128.3 41 243.4 105.9 322 65-78.6 105.9-193.7 105.9-322s-41-243.4-105.9-322c-64.9 78.6-105.9 193.8-105.9 322z"
              fill="#F9CC12"
              p-id="2835"
            ></path>
            <path
              d="M544.4 745L529 726.3c-34.5-41.8-61.7-91.8-80.9-148.7-19.7-58.5-29.7-121.1-29.7-186s10-127.5 29.7-186c19.1-56.9 46.3-106.9 80.9-148.7l15.4-18.6 15.4 18.6c34.5 41.8 61.7 91.8 80.9 148.7 19.7 58.5 29.7 121.1 29.7 186s-10 127.5-29.7 186c-19.1 56.9-46.3 106.9-80.9 148.7L544.4 745z m0-642.5c-54.9 76.6-85.9 180.4-85.9 289.2s31.1 212.6 85.9 289.2c54.9-76.6 85.9-180.4 85.9-289.2S599.2 179 544.4 102.5z"
              fill="#444D68"
              p-id="2836"
            ></path>
          </svg>
          <span style="color:green">修改用户名</span>
        </h2>
       <div class="infor-modify">
         <Modify></Modify>
       </div>
      </article>
      <article class="information-01 clearfix">
        <h2 class="title02">
          <svg
            t="1630925950687"
            class="icon hot"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2829"
            width="200"
            height="200"
          >
            <path
              d="M678.4 713.6c75.5-86.1 183.7-243.4 183.7-338.4 0-175.5-142.3-317.7-317.7-317.7-175.5 0-317.7 142.3-317.7 317.7 0 95 107.2 252.3 182.3 338.4h269.4z"
              fill="#186FED"
              p-id="2830"
            ></path>
            <path
              d="M687.5 733.6H399.8l-6-6.9c-44-50.4-88.3-112-121.5-168.9-43.6-74.7-65.7-136.1-65.7-182.6 0-45.6 8.9-89.8 26.5-131.5 17-40.2 41.4-76.3 72.4-107.3S372.7 81 412.9 64c41.6-17.6 85.9-26.5 131.5-26.5s89.8 8.9 131.5 26.5c40.2 17 76.3 41.4 107.3 72.4 31 31 55.4 67.1 72.4 107.3 17.6 41.6 26.5 85.9 26.5 131.5 0 46.5-22.3 108-66.3 182.7-33.4 56.8-78 118.3-122.3 168.9l-6 6.8z m-269.4-40h251.2c40.3-46.9 81.8-104.6 112-156 39.8-67.5 60.8-123.7 60.8-162.4 0-79.5-31-154.3-87.2-210.5-56.2-56.2-131-87.2-210.5-87.2s-154.3 31-210.5 87.2-87.2 131-87.2 210.5c0 38.8 20.8 95 60.3 162.4 30 51.5 71.1 109.2 111.1 156z"
              fill="#444D68"
              p-id="2831"
            ></path>
            <path
              d="M544.4 892.5c-5.5 0-10-4.5-10-10V709.7c0-5.5 4.5-10 10-10s10 4.5 10 10v172.9c0 5.5-4.5 9.9-10 9.9zM477.1 892.5c-4 0-7.8-2.4-9.3-6.3l-59.3-150.6c-2-5.1 0.5-10.9 5.6-13 5.1-2 10.9 0.5 13 5.6l59.3 150.6c2 5.1-0.5 10.9-5.6 13-1.2 0.5-2.4 0.7-3.7 0.7zM611.6 892.5c-1.2 0-2.5-0.2-3.7-0.7-5.1-2-7.7-7.8-5.6-13l59.3-150.6c2-5.1 7.8-7.7 13-5.6 5.1 2 7.7 7.8 5.6 13l-59.3 150.6c-1.5 3.9-5.3 6.3-9.3 6.3z"
              fill="#444D68"
              p-id="2832"
            ></path>
            <path
              d="M610.7 966.5H478c-5.3 0-9.7-4.3-9.7-9.7l-38.6-120.2c0-5.3 4.3-9.7 9.7-9.7h210c5.3 0 9.7 4.3 9.7 9.7l-38.6 120.2c-0.1 5.4-4.5 9.7-9.8 9.7z"
              fill="#F9CC12"
              p-id="2833"
            ></path>
            <path
              d="M610.7 976.5H478c-10.2 0-18.6-7.8-19.6-17.8l-38.7-120.5v-1.6c0-10.8 8.8-19.7 19.7-19.7h210c10.8 0 19.7 8.8 19.7 19.7v1.6l-0.5 1.5-38.2 119c-1.1 10-9.5 17.8-19.7 17.8z m-132.3-20h132v-1.2l0.5-1.5L648.4 837h-208l38 118.3v1.2z"
              fill="#444D68"
              p-id="2834"
            ></path>
            <path
              d="M438.4 391.6c0 128.3 41 243.4 105.9 322 65-78.6 105.9-193.7 105.9-322s-41-243.4-105.9-322c-64.9 78.6-105.9 193.8-105.9 322z"
              fill="#F9CC12"
              p-id="2835"
            ></path>
            <path
              d="M544.4 745L529 726.3c-34.5-41.8-61.7-91.8-80.9-148.7-19.7-58.5-29.7-121.1-29.7-186s10-127.5 29.7-186c19.1-56.9 46.3-106.9 80.9-148.7l15.4-18.6 15.4 18.6c34.5 41.8 61.7 91.8 80.9 148.7 19.7 58.5 29.7 121.1 29.7 186s-10 127.5-29.7 186c-19.1 56.9-46.3 106.9-80.9 148.7L544.4 745z m0-642.5c-54.9 76.6-85.9 180.4-85.9 289.2s31.1 212.6 85.9 289.2c54.9-76.6 85.9-180.4 85.9-289.2S599.2 179 544.4 102.5z"
              fill="#444D68"
              p-id="2836"
            ></path>
          </svg>
          <span style="color:green">修改密码</span>
        </h2>
        <div class="infor-modify">
         <Password></Password>
       </div>
      </article>
    </div>
  </el-drawer>
</template>

<script>
// 引入vuex
import { mapState,mapMutations } from "vuex";
import { computed } from "vue";
// 引入子组件修改用户名
import Modify from "./Modify.vue";
import Password from "./Password.vue";
export default {
  name: "loginUser",
  components:{
    Modify,
    Password,
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      imageUrl: "",
      drawer: false,
    };
  },
  methods: {
    ...mapMutations(["updateUserInfo"]),
    // 修改头像
    // 上传文件之前的钩子函数，参数为上传的文件
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
     //  文件上传成功后的钩子函数
    handleAvatarSuccess(res, file) {
      // console.log(res,file);
      if(res.code) return this.$message.error(res.message); // 上传失败
      this.imageUrl = URL.createObjectURL(file.raw);//设置缩略图的路径
      // 修改vuex里的用户信息
      this.updateUserInfo(res.data);
    },
  },
};
</script>

<style lang="less" scoped>
.loginuser {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
}

 .el-button--primary {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.loginuser .logimg {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.login-information {
  width: 100%;
  border-top: 1px solid #ccc;
  background-color: #fffbf0;
}
.information-01 {
  position: relative;
  width: 100%;
  padding: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #f8f5f1;
  box-shadow: 0px 0px 0px 1px rgb(248, 196, 107);
}
.information-01 .information-img-radius {
  float: left;
  height: 100px;
  height: 100px;
  margin-right: 20px;
  margin-left: 25px;
  border-radius: 50%;
  cursor: pointer;
}
.information-img-radius img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.information-01 .information-img {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  cursor: pointer;
}
.information-img img {
  width: 150px;
  height: 150px;
}
.information-01 .information-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: #111;
  font-family: "Microsoft YaHei";
}
.information-01 .title02 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #111;
  font-weight: 400;
}
.title02 .hot {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  animation: updown 3s ease alternate infinite;
}
@keyframes updown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(-10px);
  }
}
 /deep/ .el-form-item{
  margin-bottom:7px;
}

// 头像修改组件
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}
.avatar {
  max-width: 180px;
  max-height: 180px;
  display: block;
}
/deep/ .el-upload {
  border: 1px solid #ccc;
}


</style>